<template>
	<view class="y-button" @tap.stop="tap" :class="size">
		<slot></slot>
	</view>
</template>

<script>
	export default {
		props: {
			size: ''
		},
		methods: {
			tap() {
				this.$emit('tap', this);
				this.$emit('click', this);
			}
		}
	}
</script>

<style lang="scss">
	.y-button {
		white-space: nowrap;
		cursor: pointer;
		border-radius: 3000px;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		line-height: 1.9em;
		height: 2em;
		box-shadow: 0 0 5px 1px rgba(0, 0, 0, .1);
		background: linear-gradient(90deg, rgb(123, 146, 255) 0%, rgb(67, 109, 255) 100%);
		font-size: 20px;
		text-align: center;

		&.small {
			font-size: 10px;
			line-height: 1.7em;
			height: 1.8em;
			display: inline-block;
			text-align: center;
			padding: 0 1em;
		}
	}
</style>
